<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="~{common/admin-list-template}">
<head>
    <title>主页面</title>
</head>
<body class="hold-transition skin-green-light  sidebar-mini">

<div class="content-wrapper" layout:fragment="content">

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            页面标题
            <small>可选描述</small>
        </h1>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
        <div class=" box box-default">
            <div class="box-header">
                <div class="box-title">仪表盘</div>

            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-6 col-md-3 text-center">
                        <input type="text" class="knob" value="80" data-skin="tron" data-thickness="0.2"
                               data-width="150" data-height="150" data-fgColor="#3c8dbc" data-readonly="true">

                        <div class="knob-label">cpu</div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-6 col-md-3 text-center">
                        <input type="text" class="knob" value="60" data-skin="tron" data-thickness="0.2"
                               data-width="150" data-height="150" data-fgColor="#f56954">

                        <div class="knob-label">disk</div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-6 col-md-3 text-center">
                        <input type="text" class="knob" value="10" data-skin="tron" data-thickness="0.2"
                               data-width="150" data-height="150" data-fgColor="#00a65a">

                        <div class="knob-label">memory</div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-6 col-md-3 text-center">

                    </div>
                    <!-- ./col -->
                </div>
                <!-- /.row -->
            </div>
            <div class="box-footer"></div>
        </div>
        <!-- /.system info-->

        <div class="box box-default">
            <div class="box-header">
                <div class="box-title">使用技术</div>
            </div>
            <div class="box-body">
                <ul>
                    <li>
                        后台
                        <ul>
                            <li>spring boot</li>
                            <li>spring security</li>
                        </ul>

                    </li>
                    <li>
                        数据库
                        <ul>
                            <li>mysql</li>
                            <li>redis</li>
                        </ul>
                    </li>
                    <li>
                        前端
                        <ul>
                            <li>AdminLte,后台使用的基本框架,<a href="https://github.com/almasaeed2010/AdminLTE">点击前往</a></li>
                            <li>前台表单验证框架:bootstrap-validator,<a href="https://github.com/1000hz/bootstrap-validator">点击前往</a>
                            </li>
                            <li>图像裁剪工具:cropper,<a href="https://github.com/fengyuanchen/cropper">点击前往</a></li>
                            <li>表格框架:bootstrap-table,<a href="https://github.com/wenzhixin/bootstrap-table">点击前往</a>
                            </li>
                            <li>标签输入插件:bootstrap-tagsinput,<a
                                    href="https://github.com/bootstrap-tagsinput/bootstrap-tagsinput">点击前往</a></li>
                        </ul>
                    </li>
                </ul>

            </div>

        </div>

        <!-- /.technology -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->



<div layout:fragment="page-js">
    <!-- page script -->
    <!-- jQuery Knob -->
    <script src="/bower_components/jquery-knob/js/jquery.knob.js"></script>

    <!-- page script -->
    <script type="text/javascript">
        $(function () {
            /* jQueryKnob */

            $(".knob").knob({
                draw: function () {

                    // "tron" case
                    if (this.$.data('skin') == 'tron') {

                        var a = this.angle(this.cv)  // Angle
                            , sa = this.startAngle          // Previous start angle
                            , sat = this.startAngle         // Start angle
                            , ea                            // Previous end angle
                            , eat = sat + a                 // End angle
                            , r = true;

                        this.g.lineWidth = this.lineWidth;

                        this.o.cursor
                        && (sat = eat - 0.3)
                        && (eat = eat + 0.3);

                        if (this.o.displayPrevious) {
                            ea = this.startAngle + this.angle(this.value);
                            this.o.cursor
                            && (sa = ea - 0.3)
                            && (ea = ea + 0.3);
                            this.g.beginPath();
                            this.g.strokeStyle = this.previousColor;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
                            this.g.stroke();
                        }

                        this.g.beginPath();
                        this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
                        this.g.stroke();

                        this.g.lineWidth = 2;
                        this.g.beginPath();
                        this.g.strokeStyle = this.o.fgColor;
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                        this.g.stroke();

                        return false;
                    }
                }
            });
        });
    </script>
</div>


</body>
</html>